<template>
  <swiper  ref="mySwiper"  :options="swiperOptions">
    <swiper-slide class="swiper-slide" v-for="(item, index) in imgList" :key="index">
      <router-link :to="{path: '/detail', query: {productId: 1}}">
        <img class="carousel-img" :src="item.imgUrl">
      </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      step: 0,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        //自动轮播
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: true
      }
    };
  },
  props: {
    imgList: {
      type: Array,
      required: true
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    console.log('Current Swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false)
  },
  methods: {

  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.carousel-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>
